//1.了解：require.context(路径，是否扫描子目录， 正则匹配) 可以引入某个目录下的内容
//2. 了解：svg-sprite-loader打包了所有svg到一个svg标签上，将svg名称作为symbol标签的id属性  
// 安装 svg-sprite-loader 后，必须手动添加配置才能使其正常工作。确保你根据项目需求正确配置加载器，以便有效地使用 SVG 图标。
// 3.了解：svg-icon使用iconClass属性引用了symbol的id
//假设你已经设置了 svg-sprite-loader，并合并了多个 SVG 图标。每个图标都会生成一个唯一的 <symbol> ID。
//<svg-icon iconClass="icon-example"></svg-icon>


import Vue from 'vue'  //导入 Vue.js 框架。
import SvgIcon from '@/components/SvgIcon'// 导入 SvgIcon 组件。

//全局注册 SVG 图标组件  这意味着在任何 Vue 组件中都可以直接使用 <svg-icon /> 来渲染 SVG 图标。
              //名字       图标组件
Vue.component('svg-icon', SvgIcon)

// 下面三行代码的任务是 把 同级目录的 svg目录下的.svg图片引入到项目中来
const req = require.context('./svg', false, /\.svg$/)    //1.找相对路径表示当前目录下的 svg 文件夹。
//2.设置为 false 表示只在指定的目录中查找，不会递归到子目录。
//3.这是一个正则表达式，用于匹配文件名。/\.svg$/ 表示匹配所有以 .svg 结尾的文件。

// 这行代码的作用是创建一个函数，该函数能够引入传入的上下文对象中的所有模块。
// requireContext.keys()获取所有是svg文件
//map(requireContext) 将对每个路径调用 requireContext，导入相应的 SVG 文件并返回一个新数组 icons，其中包含所有导入的 SVG 模块。
const requireAll = requireContext => requireContext.keys().map(requireContext)

//当你调用 requireAll(req) 时，实际上是在执行以下操作：
//获取所有匹配的模块路径: req.keys() 返回所有符合条件的 SVG 文件的路径。
//引入所有模块: map(requireContext) 对每个路径调用 req 函数，引入每个 SVG 文件
requireAll(req)

// 相当于把svg下的所有的svg图片打包到了项目中
// 如果想用svg图片 就在svg目录下去寻找就可以了

